import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createDrawerNavigator } from '@react-navigation/drawer'
import AntDesign from "react-native-vector-icons/AntDesign"
import Home from './components/Home'
import Play from './components/Play'
import Like from './components/Like'
import Login from './components/Login'
import Team from './components/Team'
let Tab = createBottomTabNavigator()
let Drawer = createDrawerNavigator()

const UserInfoScreen = () => {
    return (
        <View>
            <Text>UserInfo</Text>
        </View>
    )
}

const BottomTab = () => {
    return (
        <Tab.Navigator screenOptions={({ route }) => ({
            tabBarIcon: ({ color, size }) => {
                let iconName
                switch (route.name) {
                    case "音乐馆":
                        iconName = "home"
                        break;
                    case "正在播":
                        iconName = 'playcircleo'
                        break;
                    case "我喜欢":
                        iconName = "hearto"
                        break;
                    case "制作团队":
                        iconName = 'user'
                        break;
                }

                return <AntDesign name={iconName} size={size} color={color} />
            },
        })} tabBarOptions={{
            activeTintColor: 'red',
            inactiveTintColor: 'gray',
        }}>
            <Tab.Screen name="音乐馆" component={Home} />
            <Tab.Screen name="正在播" component={Play} />
            <Tab.Screen name="我喜欢" component={Like} />
            <Tab.Screen name="制作团队" component={Team} />
        </Tab.Navigator>
    )
}

export default class App extends Component {
    render() {
        return (
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="首页">
                    <Drawer.Screen name='首页' component={BottomTab} />
                    <Drawer.Screen name='登录' component={Login} />
                    <Drawer.Screen name='用户中心' component={UserInfoScreen} />
                </Drawer.Navigator>
            </NavigationContainer>
        )
    }
}
